import React from 'react';
import {Link} from 'react-router';
import {observer} from 'mobx-react';
import Im from 'immutable';
import {Spin} from 'antd';

import Store from './store.js';
import './index.less';

//component
import SetHelmet from 'components/widgets/SetHelmet';
import Empty from 'components/widgets/Empty';
import AgentsDialog from 'components/services/AgentsDialog';
import AgentsDetail from 'components/services/AgentsDetail';
import QrCodeDialog from 'components/services/QrCodeDialog';
import ReButton from 'components/widgets/ReButton';
import ReTextField from 'components/widgets/ReTextField';
import ReSelectField from 'components/widgets/ReSelectField';

@observer
export default class view extends React.Component {
    static propTypes = {
        //name: React.PropTypes.string,
    };

    static defaultProps = {};

    name = 'AgentsManage';
    store = null;

    constructor(props, context) {

        super(props, context);

        this.name = props.name ? props.name : this.name;
        this.store = new Store({name: this.name});
        this.identityList = [
            {value: '', label: '全部'},
            {value: '艺术家', label: '艺术家'},
            {value: '设计师', label: '设计师'},
            {value: '少儿', label: '少儿'},
            {value: '美术馆', label: '美术馆'},
            {value: '画廊', label: '画廊'},
            {value: '教育机构', label: '教育机构'},
            {value: '设计机构', label: '设计机构'},
            {value: '收藏家', label: '收藏家'},
        ];
    }

    componentWillMount() {
        this.store.will();
    }

    componentDidMount() {
        this.store.mount();
    }

    componentWillUnmount() {
        this.store.remove();
    }

    componentWillReact() {
        // console.log(arguments);
    }

    render() {

        let isInSecond = !!this.store.firstAgentId;
        let agentName = isInSecond ? this.store.secondAgentName : this.store.agentName;
        let agentPhone = isInSecond ? this.store.secondAgentPhone : this.store.agentPhone;
        let agentIdentity = isInSecond ? this.store.secondAgentIdentity : this.store.agentIdentity;

        let mapList = isInSecond ? this.store.secondAgentsList : this.store.agentsList;

        return (
            <div className="orin-s-agentsmanage-root">
                <SetHelmet title="代理商管理"/>
                <AgentsDialog/>
                <QrCodeDialog/>
                <AgentsDetail/>
                <div className="header-wrapper">
                    {!isInSecond ?
                        <span> 代理商管理</span> :
                        <span className="back" onClick={() => this.store.backToFirst()}>{'< 返回一级代理商'}</span>
                    }
                </div>
                <div className="search-wrapper">
                    <div className="search-left">
                        <ReTextField
                            isLabel={false}
                            type="text"
                            className="work-input"
                            notfullWidth={false}
                            onChange={(e, v) => this.store.agentNameChange(v)}
                            errorText={''}
                            searchIcon={true}
                            searchHandler={() => this.store.getAgentsList(true)}
                            closeIcon={true}
                            closeHandler={() => this.store.clearHandle()}
                            value={agentName}
                            placeholder={'代理商姓名'}
                            onKeyDown={(e) => this.store.keydownMethod(e)}/>
                        <ReTextField
                            isLabel={false}
                            type="text"
                            className="work-input"
                            notfullWidth={false}
                            onChange={(e, v) => this.store.agentPhoneChange(v)}
                            errorText={''}
                            searchIcon={true}
                            searchHandler={() => this.store.getAgentsList(true)}
                            closeIcon={true}
                            closeHandler={() => this.store.clearHandle()}
                            value={agentPhone}
                            supportIntOnly={true}
                            placeholder={'代理商手机号'}
                            onKeyDown={(e) => this.store.keydownMethod(e)}/>
                        <ReSelectField
                            type=""
                            className="identity-input"
                            isOpen={false}
                            list={this.identityList}
                            value={agentIdentity}
                            placeholder={'请选择代理商身份'}
                            onChange={(v) => this.store.agentIdentityChange(v.value)}/>
                    </div>
                    <div className="search-right">
                        <ReButton label={isInSecond ? '添加二级代理商' : '添加代理商'} className="add-btn"
                                  onClick={() => this.store.agentAdd()}/>
                    </div>
                </div>
                <div className="content-data-wrapper">
                    <div className="content-header-title">
                        <div className="content-number title">
                        </div>
                        <div className="content-cover title">
                            <span>时间</span>
                        </div>
                        <div className="content-name title">
                            <span>姓名</span>
                        </div>
                        <div className="content-size title">
                            <span>手机号码</span>
                        </div>
                        <div className="content-size title">
                            <span>身份</span>
                        </div>
                        <div className="content-size title">
                            <span>注册用户数量</span>
                        </div>
                        <div className="content-type title">
                            <span>引流购买金额</span>
                        </div>
                        <div className="content-more-btn title">
                            <span>更多</span>
                        </div>
                    </div>
                    <div className="content">
                        {
                            mapList.map((item, index) => {
                                let popMenuOption = [{
                                    'name': '编辑',
                                    'func': (e) => this.store.editClick(item),
                                }, {
                                    'name': '二级',
                                    'func': (e) => this.store.secondClick(item),
                                    'hide': isInSecond,
                                }, {
                                    'name': '二维码',
                                    'func': (e) => this.store.qrCodeClick(item),
                                }, {
                                    'name': '详细',
                                    'func': (e) => this.store.detailClick(item),
                                }, {
                                    'name': '删除',
                                    'func': (e) => this.store.deleteClick(item),
                                }
                                ];
                                return (
                                    <div key={index} className="users-wrapper-pc">
                                        <div className="user-item-wrapper">
                                            <div className="content-number">
                                                <span className="text">
                                                    {index + 1}
                                                </span>
                                            </div>
                                            <div className="content-cover">
                                                <p className="text">
                                                    <span>
                                                        {$$.utils.getFormatAllTime2(item.createTime, true)}
                                                    </span>
                                                </p>
                                            </div>
                                            <div className="content-name">
                                                <p className="text">
                                                <span>
                                                    {item.name}
                                                </span>
                                                </p>
                                            </div>
                                            <div className="content-size">
                                                <p className="text">
                                                <span>
                                                    {item.phone}
                                                </span>
                                                </p>
                                            </div>
                                            <div className="content-size">
                                                <p className="text">
                                                <span>
                                                    {item.label}
                                                </span>
                                                </p>
                                            </div>
                                            <div className="content-size">
                                                <p className="text">
                                                <span>
                                                    {item.registerCount}
                                                </span>
                                                </p>
                                            </div>
                                            <div className="content-type">
                                                <p className="text">
                                                    <span>
                                                        {item.buyCount / 100}元
                                                    </span>
                                                </p>
                                            </div>
                                            <div className="content-more-btn">
                                                {
                                                    popMenuOption.map((item, index) => {
                                                        if (!item.hide) {
                                                            return (
                                                                <div key={index} className="select-button"
                                                                     onClick={(e) => item.func && item.func()}>
                                                                    <span className="btn-name">{item.name}</span>
                                                                </div>
                                                            )
                                                        }
                                                    })
                                                }
                                            </div>
                                        </div>
                                    </div>
                                )
                            })
                        }
                    </div>
                </div>
                {
                    !this.store.firstRequest &&
                    <div className="manage-loading-wrapper">
                        <Spin spinning={true} size="large" tip={$$.LN.IS_LOADING}/>
                    </div>
                }

                {
                    mapList.length === 0 && this.store.firstRequest &&
                    <Empty tips={isInSecond ? '暂未搜索到二级代理商' : '暂未搜索到代理商'}/>
                }
                {
                    mapList.length > 0 &&
                    <div className="pagination-wrapper">
                        <div className="pagination-count">
                            总共有{mapList.length}条数据
                        </div>
                    </div>
                }
            </div>
        );
    }
}